<!doctype html>
<html lang="zh-CN">
<head><meta name="generator" content="Hexo 3.8.0">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8">
    <meta name="baidu-site-verification" content="dIcXMeY8Ya">
    
    <title>vue-动画 | 墨染红尘</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="keywords" content="三更编程, JAVA, 算法, 后端开发">
    <meta name="description" content="菜豆个人博客">

    
    <link rel="alternative" href="/atom.xml" title="墨染红尘" type="application/atom+xml">
    
    
    <link rel="shortcut icon" href="/blog/logo.png">
    
    <link rel="stylesheet" href="/blog/css/style.css">
    <!--[if lt IE 9]>
    <script src="/blog/js/html5.js"></script>
    <![endif]-->
    
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?fd459238242776d173cdc64918fb32f2";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>


</head>
</html>
<body class="home">
    <!--[if lt IE 9]>
    <div class="browsehappy">
        当前网页 <strong>不支持</strong>
        你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/">升级你的浏览器</a>.
    </div>
    <![endif]-->

    <!-- 博客头部 -->
    <header class="header">
    <section class="container header-main">
        <div class="logo">
            <a href="/blog/">
                <div class="cover">
                    <span class="name">墨染红尘</span>
                    <span class="description">堇色流年·追梦少年</span>
                </div>
            </a>
        </div>
        <div class="dropnav icon-paragraph-justify" id="JELON__btnDropNav"></div>
        <ul class="menu hidden" id="JELON__menu">
            
            <li rel="/blog/2019/05/22/Vue/08-vue-动画/index.html" class="item ">
                <a href="/blog/" title="首页" class="icon-home">&nbsp;首页</a>
            </li>
            
        </ul>
        <div class="profile clearfix">
            <div class="feeds fl">
                
                
                <p class="links">
                    
                        <a href="https://github.com/fxiaoyu97" target="_blank">Github</a>
                        |
                    
                        <a href target="_blank">Hosted by Coding Pages</a>
                        
                    
                </p>
                <p class="sns">
                    
                    <a href="javascript: void(0);" class="wechat">
                        <b>■</b>
                        公众号
                        <span class="popover">
                            <img src="/blog/img/wechat_mp.jpg" width="120" height="120" alt="我的微信订阅号">
                            <i class="arrow"></i>
                        </span>
                    </a>
                </p>
                
            </div>
            <div class="avatar fr">
                <img src="/blog/img/avatar.jpg" alt="avatar" title="Jelon">
            </div>
        </div>
    </section>
</header>


    <!-- 博客正文 -->
    <div class="container body clearfix">
        <section class="content">
            <div class="content-main widget">
                <!-- 文章页 -->
<!-- 文章 -->
<article class="post article">
    <header class="text-center">
        <h3 class="post-title"><span>vue-动画</span></h3>
    </header>
    <p class="post-meta text-center">
        Calos 发表于
        <time datetime="2019-05-21T16:00:00.000Z">2019-05-22</time>
    </p>
    <div class="post-content">
        <blockquote>
<p>参考链接：<a href="https://cn.vuejs.org/v2/guide/transitions.html" target="_blank" rel="noopener">https://cn.vuejs.org/v2/guide/transitions.html</a></p>
</blockquote>
<hr>
<h2 id="1、过渡的类名"><a href="#1、过渡的类名" class="headerlink" title="1、过渡的类名"></a>1、过渡的类名</h2><blockquote>
<p>在进入/离开的过渡中，会有 6 个 class 切换。</p>
<ol>
<li><p><code>v-enter</code>：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。</p>
</li>
<li><p><code>v-enter-active</code>：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。</p>
</li>
<li><p><code>v-enter-to</code>: <strong>2.1.8版及以上</strong> 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 <code>v-enter</code> 被移除)，在过渡/动画完成之后移除。</p>
</li>
<li><p><code>v-leave</code>: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。</p>
</li>
<li><p><code>v-leave-active</code>：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。</p>
</li>
<li><p><code>v-leave-to</code>: <strong>2.1.8版及以上</strong> 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 <code>v-leave</code> 被删除)，在过渡/动画完成之后移除。</p>
<p>​        <font color="#EE7600">对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <code>&lt;transition&gt;</code>，则 <code>v-</code> 是这些类名的默认前缀。如果你使用了 <code>&lt;transition name=&quot;my&quot;&gt;</code>，那么 <code>v-enter</code> 会替换为 <code>my-enter</code>。</font></p>
</li>
</ol>
</blockquote>
<p>示例代码：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">	&lt;head&gt;</span><br><span class="line">		&lt;meta charset=<span class="string">"utf-8"</span>&gt;</span><br><span class="line">		&lt;title&gt;<span class="xml"><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span></span><br><span class="line">		&lt;script type=<span class="string">"text/javascript"</span> src=<span class="string">"../vue-2.6.10.js"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line">		&lt;style type=<span class="string">"text/css"</span>&gt;</span><br><span class="line">			.v-enter,</span><br><span class="line">			.v-leave-to&#123;</span><br><span class="line">				opacity: <span class="number">0</span>;</span><br><span class="line">				transform: translateX(<span class="number">12.5</span>rem);</span><br><span class="line">			&#125;</span><br><span class="line">			.v-enter-active,</span><br><span class="line">			.v-leave-active&#123;</span><br><span class="line">				transition: all <span class="number">0.4</span>s ease;</span><br><span class="line">			&#125;</span><br><span class="line">			.my-enter,</span><br><span class="line">			.my-leave-to&#123;</span><br><span class="line">				opacity: <span class="number">0</span>;</span><br><span class="line">				transform: translateY(<span class="number">12.5</span>rem);</span><br><span class="line">			&#125;</span><br><span class="line">			.my-enter-active,</span><br><span class="line">			.my-leave-active&#123;</span><br><span class="line">				transition: all <span class="number">0.4</span>s ease;</span><br><span class="line">			&#125;</span><br><span class="line">		&lt;<span class="regexp">/style&gt;</span></span><br><span class="line"><span class="regexp">	&lt;/</span>head&gt;</span><br><span class="line">	&lt;body&gt;</span><br><span class="line">		&lt;div id=<span class="string">"app"</span>&gt;</span><br><span class="line">			&lt;input type=<span class="string">"button"</span> @click=<span class="string">"flag=!flag"</span> value=<span class="string">"点击"</span> /&gt;</span><br><span class="line">			&lt;transition&gt;</span><br><span class="line">			&lt;p v-<span class="keyword">if</span>=<span class="string">"flag"</span>&gt;&#123;&#123;msg&#125;&#125;&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">			&lt;/</span>transition&gt;</span><br><span class="line">			</span><br><span class="line">			&lt;hr /&gt;</span><br><span class="line">			&lt;!-- 自定义前缀 --&gt;</span><br><span class="line">			&lt;input type=<span class="string">"button"</span> @click=<span class="string">"flag2=!flag2"</span> value=<span class="string">"点击2"</span> /&gt;</span><br><span class="line">			&lt;transition name=<span class="string">"my"</span>&gt;</span><br><span class="line">			&lt;p v-<span class="keyword">if</span>=<span class="string">"flag2"</span>&gt;&#123;&#123;msg&#125;&#125;&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">			&lt;/</span>transition&gt;</span><br><span class="line">		&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">		&lt;script&gt;</span></span><br><span class="line"><span class="regexp">			var vm = new Vue(&#123;</span></span><br><span class="line"><span class="regexp">				el:'#app',</span></span><br><span class="line"><span class="regexp">				data:&#123;</span></span><br><span class="line"><span class="regexp">					flag:true,</span></span><br><span class="line"><span class="regexp">					flag2:true,</span></span><br><span class="line"><span class="regexp">					msg:'Hello Vue！'</span></span><br><span class="line"><span class="regexp">				&#125;,</span></span><br><span class="line"><span class="regexp">				methods:&#123;&#125;</span></span><br><span class="line"><span class="regexp">			&#125;)</span></span><br><span class="line"><span class="regexp">		&lt;/</span>script&gt;</span><br><span class="line">	&lt;<span class="regexp">/body&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>html&gt;</span><br></pre></td></tr></table></figure>
<hr>
<h2 id="2、使用第三方动画"><a href="#2、使用第三方动画" class="headerlink" title="2、使用第三方动画"></a>2、使用第三方动画</h2><h3 id="引入css文件"><a href="#引入css文件" class="headerlink" title="引入css文件"></a>引入<code>css</code>文件</h3><p>引入文件<code>animate.css</code>，官网地址：<a href="https://daneden.github.io/animate.css/" target="_blank" rel="noopener">https://daneden.github.io/animate.css/</a></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"https://cdn.jsdelivr.net/npm/animate.css@3.5.1"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>设置入场动画和离场动画的效果示例：</p>
<ul>
<li>可以使用 :duration=”毫秒值” 来统一设置 入场 和 离场 时候的动画时长</li>
<li>使用 :duration=”{ enter: “毫秒值”, leave: “毫秒值” }” 来分别设置入场时长和离场时长</li>
<li>这是2.2.0 新增</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">transition</span> <span class="attr">enter-active-class</span>=<span class="string">"animated bounceIn"</span> <span class="attr">leave-active-class</span>=<span class="string">"animated bounceOut"</span> <span class="attr">:duration</span>=<span class="string">"200"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">"flag"</span>&gt;</span>&#123;&#123;msg&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 或者 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">transition</span> <span class="attr">enter-active-class</span>=<span class="string">"bounceIn"</span> <span class="attr">leave-active-class</span>=<span class="string">"bounceOut"</span> <span class="attr">:duration</span>=<span class="string">"&#123; enter: 200,leave: 400&#125;"</span> &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">"flag"</span> <span class="attr">class</span>=<span class="string">"animated"</span>&gt;</span>&#123;&#123;msg&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br></pre></td></tr></table></figure>
<hr>
<h2 id="3、JavaScript钩子函数"><a href="#3、JavaScript钩子函数" class="headerlink" title="3、JavaScript钩子函数"></a>3、JavaScript钩子函数</h2><font color="#EE7600"><strong>划重点： JS钩子函数只用来做半场动画，不用来做完整的动画（即包括的进场和离场）。<code>enter</code>和<code>leave</code>里必须有<code>el.offsetTop</code>和显示调用回调函数<code>done</code>。<code>done</code> 是函数<code>afterEnter</code>/<code>afterLeave</code> 的引用，显示调用相当于直接调用一次函数，解决延迟问题</strong></font>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">transition</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">v-on:before-enter</span>=<span class="string">"beforeEnter"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">v-on:enter</span>=<span class="string">"enter"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">v-on:after-enter</span>=<span class="string">"afterEnter"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">v-on:enter-cancelled</span>=<span class="string">"enterCancelled"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">v-on:before-leave</span>=<span class="string">"beforeLeave"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">v-on:leave</span>=<span class="string">"leave"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">v-on:after-leave</span>=<span class="string">"afterLeave"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">v-on:leave-cancelled</span>=<span class="string">"leaveCancelled"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"ball"</span> <span class="attr">v-if</span>=<span class="string">"flag"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">methods: &#123;</span><br><span class="line">    <span class="comment">// --------</span></span><br><span class="line">    <span class="comment">// 进入中</span></span><br><span class="line">    <span class="comment">// --------</span></span><br><span class="line"></span><br><span class="line">    beforeEnter: <span class="function"><span class="keyword">function</span>(<span class="params">el</span>) </span>&#123;</span><br><span class="line">        el.style.transform = <span class="string">"translate(0,0)"</span></span><br><span class="line">    &#125;,</span><br><span class="line"> 	<span class="comment">// 当与 CSS 结合使用时</span></span><br><span class="line">	<span class="comment">// 回调函数 done 是可选的</span></span><br><span class="line">    enter: <span class="function"><span class="keyword">function</span>(<span class="params">el, done</span>) </span>&#123;</span><br><span class="line">        <span class="comment">//没有实际效果的一句话,但是没写没有动画效果</span></span><br><span class="line">        el.offsetWidth</span><br><span class="line">        <span class="comment">//enter表示动画开始之后的样式,设置结束以后的状态</span></span><br><span class="line">        el.style.transform = <span class="string">"translate(200px,450px)"</span></span><br><span class="line">        el.style.transition = <span class="string">'all 1s ease'</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">//done 是 afterEnter 函数的引用</span></span><br><span class="line">        done()</span><br><span class="line">    &#125;,</span><br><span class="line">    afterEnter: <span class="function"><span class="keyword">function</span>(<span class="params">el</span>) </span>&#123;&#125;,</span><br><span class="line">    enterCancelled: <span class="function"><span class="keyword">function</span>(<span class="params">el</span>) </span>&#123;&#125;,</span><br><span class="line"></span><br><span class="line">        <span class="comment">// --------</span></span><br><span class="line">        <span class="comment">// 离开时</span></span><br><span class="line">        <span class="comment">// --------</span></span><br><span class="line"></span><br><span class="line">        beforeLeave: <span class="function"><span class="keyword">function</span>(<span class="params">el</span>) </span>&#123;</span><br><span class="line">            <span class="comment">// ...</span></span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="comment">// 当与 CSS 结合使用时</span></span><br><span class="line">        <span class="comment">// 回调函数 done 是可选的</span></span><br><span class="line">        leave: <span class="function"><span class="keyword">function</span>(<span class="params">el, done</span>) </span>&#123;</span><br><span class="line">             <span class="comment">// ...</span></span><br><span class="line">             done()</span><br><span class="line">        &#125;,</span><br><span class="line">        afterLeave: <span class="function"><span class="keyword">function</span>(<span class="params">el</span>) </span>&#123;</span><br><span class="line">            <span class="comment">// ...</span></span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="comment">// leaveCancelled 只用于 v-show 中</span></span><br><span class="line">        leaveCancelled: <span class="function"><span class="keyword">function</span>(<span class="params">el</span>) </span>&#123;</span><br><span class="line">           <span class="comment">// ...</span></span><br><span class="line">        &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="4、多个元素的过渡"><a href="#4、多个元素的过渡" class="headerlink" title="4、多个元素的过渡"></a>4、多个元素的过渡</h2><blockquote>
<p>我们之后讨论<a href="https://cn.vuejs.org/v2/guide/transitions.html#多个组件的过渡" target="_blank" rel="noopener">多个组件的过渡</a>，对于原生标签可以使用 <code>v-if</code>/<code>v-else</code> 。当有<strong>相同标签名</strong>的元素切换时，需要通过 <code>key</code> 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，<strong>给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。</transition></strong></p>
</blockquote>
<p>原文链接：<a href="https://cn.vuejs.org/v2/guide/transitions.html#多个元素的过渡" target="_blank" rel="noopener">https://cn.vuejs.org/v2/guide/transitions.html#多个元素的过渡</a></p>
<h2 id="5、初始渲染的过渡"><a href="#5、初始渲染的过渡" class="headerlink" title="5、初始渲染的过渡"></a>5、<a href="https://cn.vuejs.org/v2/guide/transitions.html#初始渲染的过渡" target="_blank" rel="noopener">初始渲染的过渡</a></h2><p>可以通过 <code>appear</code> 特性设置节点在初始渲染的过渡</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">transition</span> <span class="attr">appear</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- ... --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>通过为<code>transition-group</code>元素，设置<code>tag</code>属性，实现页面刚展示出来时，渲染内部标签为指定元素，如果不指定<code>tag</code>属性，默认渲染为<code>span</code>标签</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">transition-group</span> <span class="attr">name</span>=<span class="string">"list"</span> <span class="attr">tag</span>=<span class="string">"p"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">v-for</span>=<span class="string">"item in items"</span> <span class="attr">v-bind:key</span>=<span class="string">"item"</span> <span class="attr">class</span>=<span class="string">"list-item"</span>&gt;</span></span><br><span class="line">      &#123;&#123; item &#125;&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition-group</span>&gt;</span></span><br></pre></td></tr></table></figure>

    </div>
    <p class="post-meta">
        <span class="post-cat">分类：
            <a class="cat-link" href="/blog/categories/Vue/">Vue</a>
        </span>
        <span class="post-tags">
            标签：
            
    
        <a href="/blog/tags/Vue/" title="Vue">Vue</a>
    

        </span>
    </p>
</article>
<!-- 分享按钮 -->

  <div class="article-share clearfix text-center">
    <div class="share-area">
      <span class="share-txt">分享到：</span>
      <a href="javascript: window.open('http://service.weibo.com/share/share.php?url=' + encodeURIComponent(location.href) + '&title=' + document.title + '&language=zh_cn');" class="share-icon weibo"></a>
      <a href="javascript: alert('请复制链接到微信并发送');" class="share-icon wechat"></a>
      <a href="javascript: window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + encodeURIComponent(location.href) + '&title=' + document.title);" class="share-icon qqzone"></a>
      <a href="javascript: window.open('http://connect.qq.com/widget/shareqq/index.html?url=' + encodeURIComponent(location.href) + '&desc=Jelon个人博客&title=' + document.title + '&callback=' + encodeURIComponent(location.href));" class="share-icon qq"></a>
      <a href="javascript: window.open('http://shuo.douban.com/!service/share?href=' + encodeURIComponent(location.href) + '&name=' + document.title + '&text=' + document.title);" class="share-icon douban"></a>
    </div>
  </div>


<!-- 上一篇/下一篇 -->

<div class="article-nav clearfix">
    
    <span class="prev fl">
        上一篇<br>
        <a href="/blog/2019/05/22/Vue/06-vue实例的生命周期/">
            
                vue实例的生命周期
            
        </a>
    </span>
    

    
    <span class="next fr">
        下一篇<br>
        <a href="/blog/2019/05/22/Vue/07-vue实现get，post，jsonp请求/">
            
                axios实现get，post，jsonp请求
            
        </a>
    </span>
    
</div>

<!-- 文章评论 -->

  <script src="/blog/js/comment.js"></script>
  <div id="comments" class="comment">
    <!--
    <div class="sign-bar">
      GitHub 已登录!
      <span class="sign-link">登出</span>
    </div>
    <section class="box">
      <div class="com-avatar"><img src="/blog/logo.png" alt="avatar"></div>
      <div class="com-text">
        <div class="main">
          <textarea class="text-area-edited show" placeholder="欢迎评论！"></textarea>
          <div class="text-area-preview"></div>
        </div>
        <div class="switch">
          <div class="switch-item on">编辑</div>
          <div class="switch-item">预览</div>
        </div>
        <div class="button">提交</div>
      </div>
    </section>
    <section class="tips">注：评论支持 markdown 语法！</section>
    <section class="list-wrap">
      <ul class="list">
        <li>
          <div class="user-avatar">
            <a href="/">
              <img src="/img/jelon.jpg" alt="user-avatar">
            </a>
          </div>
          <div class="user-comment">
            <div class="user-comment-header">
              <span class="post-name">张德龙</span>
              <span class="post-time">2017年12月12日</span>
              <span class="like liked">已赞</span>
              <span class="like-num">2</span>
            </div>
            <div class="user-comment-body">333333</div>
          </div>
        </li>
        <li>
          <div class="user-avatar">
            <a href="/">
              <img src="/img/jelon.jpg" alt="user-avatar">
            </a>
          </div>
          <div class="user-comment">
            <div class="user-comment-header">
              <span class="post-name">刘德华</span>
              <span class="post-time">2017年12月12日</span>
              <span class="like">点赞</span>
              <span class="like-num">2</span>
            </div>
            <div class="user-comment-body">vvvvv</div>
          </div>
        </li>
      </ul>
      <div class="page-nav">
        <a href="javascript: void(0);" class="item">1</a>
        <a href="javascript: void(0);" class="item">2</a>
        <a href="javascript: void(0);" class="item current">3</a>
      </div>
    </section>
    -->
  </div>
  <script>
  JELON.Comment({
    container: 'comments',
    label: 'Vue/08-vue-动画' || '2019/05/22/Vue/08-vue-动画/',
    owner: 'fxiaoyu97',
    repo: 'blog_comment',
    clientId: 'fxiaoyu97',
    clientSecret: 'Fsy1179006580@'
  });
  </script>


            </div>

        </section>
        <!-- 侧栏部分 -->
<aside class="sidebar">
    <section class="widget">
        <h3 class="widget-hd"><strong>文章分类</strong></h3>
        <!-- 文章分类 -->
<ul class="widget-bd">
    
    <li>
        <a href="/blog/categories/IDEA/">IDEA</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Nginx/">Nginx</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/blog/categories/地图/">地图</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Java/">Java</a>
        <span class="badge">(6)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Maven/">Maven</a>
        <span class="badge">(2)</span>
    </li>
    
    <li>
        <a href="/blog/categories/web前端/">web前端</a>
        <span class="badge">(2)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Vue/">Vue</a>
        <span class="badge">(31)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Lucene/">Lucene</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/blog/categories/SpringBoot/">SpringBoot</a>
        <span class="badge">(10)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Exception/">Exception</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/blog/categories/MySQL/">MySQL</a>
        <span class="badge">(2)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Spring/">Spring</a>
        <span class="badge">(1)</span>
    </li>
    
</ul>
    </section>

    
    <section class="widget">
        <h3 class="widget-hd"><strong>热门标签</strong></h3>
        <!-- 文章标签 -->
<div class="widget-bd tag-wrap">
  
    <a class="tag-item" href="/blog/tags/IDEA/" title="IDEA">IDEA (1)</a>
  
    <a class="tag-item" href="/blog/tags/快捷键/" title="快捷键">快捷键 (1)</a>
  
    <a class="tag-item" href="/blog/tags/Nginx/" title="Nginx">Nginx (1)</a>
  
    <a class="tag-item" href="/blog/tags/地图/" title="地图">地图 (1)</a>
  
    <a class="tag-item" href="/blog/tags/log4j/" title="log4j">log4j (1)</a>
  
    <a class="tag-item" href="/blog/tags/正则/" title="正则">正则 (1)</a>
  
    <a class="tag-item" href="/blog/tags/JFrame/" title="JFrame">JFrame (1)</a>
  
    <a class="tag-item" href="/blog/tags/爬虫/" title="爬虫">爬虫 (2)</a>
  
    <a class="tag-item" href="/blog/tags/Java/" title="Java">Java (6)</a>
  
    <a class="tag-item" href="/blog/tags/字符串/" title="字符串">字符串 (1)</a>
  
    <a class="tag-item" href="/blog/tags/Maven/" title="Maven">Maven (2)</a>
  
    <a class="tag-item" href="/blog/tags/JavaScript/" title="JavaScript">JavaScript (1)</a>
  
    <a class="tag-item" href="/blog/tags/Vue/" title="Vue">Vue (31)</a>
  
    <a class="tag-item" href="/blog/tags/WebMagic/" title="WebMagic">WebMagic (1)</a>
  
    <a class="tag-item" href="/blog/tags/web前端/" title="web前端">web前端 (3)</a>
  
    <a class="tag-item" href="/blog/tags/HTML/" title="HTML">HTML (1)</a>
  
    <a class="tag-item" href="/blog/tags/webpack/" title="webpack">webpack (12)</a>
  
    <a class="tag-item" href="/blog/tags/Lucene/" title="Lucene">Lucene (1)</a>
  
    <a class="tag-item" href="/blog/tags/SpringBoot/" title="SpringBoot">SpringBoot (9)</a>
  
    <a class="tag-item" href="/blog/tags/注解/" title="注解">注解 (2)</a>
  
    <a class="tag-item" href="/blog/tags/yml/" title="yml">yml (2)</a>
  
    <a class="tag-item" href="/blog/tags/Exception/" title="Exception">Exception (1)</a>
  
    <a class="tag-item" href="/blog/tags/Mysql/" title="Mysql">Mysql (1)</a>
  
    <a class="tag-item" href="/blog/tags/MySQL/" title="MySQL">MySQL (2)</a>
  
    <a class="tag-item" href="/blog/tags/Spring/" title="Spring">Spring (1)</a>
  
    <a class="tag-item" href="/blog/tags/Mybatis/" title="Mybatis">Mybatis (1)</a>
  
</div>
    </section>
    

    

    
</aside>
<!-- / 侧栏部分 -->
    </div>

    <!-- 博客底部 -->
    <footer class="footer">
    &copy;
    
        2016-2019
    

    <a href="/blog/">Todou Loves You</a>
</footer>
<div class="back-to-top" id="JELON__backToTop" title="返回顶部">返回顶部</div>

    <!--博客js脚本 -->
    <!-- 这里放网站js脚本 -->
<script src="/blog/js/main.js"></script>
</body>
</html>